import React from 'react';
import { Form, InputNumber, Select, Collapse, ColorPicker, Space, Switch, Row, Col } from 'antd';
import type { WineMenuConfig, BreweryFontConfig, PriceFontConfig, BaseFontConfig } from '../types';
import styled from 'styled-components';

const { Panel } = Collapse;

interface ConfigPanelProps {
  config: WineMenuConfig;
  onChange: (newConfig: Partial<WineMenuConfig>) => void;
}

const StyledSpace = styled(Space)`
  width: 100%;
  .ant-form-item {
    margin-bottom: 16px;
    text-align: left;
  }
  .ant-picker {
    width: 100%;
  }
  .ant-form-item-label {
    text-align: left;
  }
`;

const ColorPickerContainer = styled.div`
  .ant-color-picker-trigger {
    float: left;
    height: 32px;
  }
`;

const ConfigSection = styled.div`
  margin-bottom: 24px;
  text-align: left;
  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #333;
  }
`;

export const ConfigPanel: React.FC<ConfigPanelProps> = ({ config, onChange }) => {
  const handleLayoutChange = (key: keyof WineMenuConfig['layout'], value: number | null) => {
    if (value !== null) {
      onChange({
        layout: { ...config.layout, [key]: value }
      });
    }
  };

  const handleItemStyleChange = (key: keyof WineMenuConfig['item'], value: number | string | null) => {
    if (value !== null) {
      onChange({
        item: { ...config.item, [key]: value }
      });
    }
  };

  const handleImageConfigChange = (key: keyof WineMenuConfig['item']['image'], value: string | number | null) => {
    if (value !== null) {
      onChange({
        item: {
          ...config.item,
          image: {
            ...config.item.image,
            [key]: value
          }
        }
      });
    }
  };

  const handleBreweryFontChange = (key: keyof BreweryFontConfig, value: string | number | boolean | null) => {
    if (value !== null) {
      onChange({
        fonts: {
          ...config.fonts,
          brewery: { ...config.fonts.brewery, [key]: value }
        }
      });
    }
  };

  const handlePriceFontChange = (key: keyof PriceFontConfig, value: string | number | boolean | null) => {
    if (value !== null) {
      onChange({
        fonts: {
          ...config.fonts,
          price: { ...config.fonts.price, [key]: value }
        }
      });
    }
  };

  const handleBaseFontChange = (
    group: 'name' | 'category' | 'abv',
    key: keyof BaseFontConfig,
    value: string | number | null
  ) => {
    if (value !== null) {
      onChange({
        fonts: {
          ...config.fonts,
          [group]: { ...config.fonts[group], [key]: value }
        }
      });
    }
  };

  const renderFontSection = (group: keyof WineMenuConfig['fonts']) => {
    const font = config.fonts[group];
    
    return (
      <ConfigSection key={group}>
        <div className="section-title">{getFontGroupLabel(group)}</div>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Form.Item label="大小">
              <InputNumber
                min={12}
                max={48}
                value={font.size}
                onChange={(value) => {
                  if (group === 'brewery') {
                    handleBreweryFontChange('size', value);
                  } else if (group === 'price') {
                    handlePriceFontChange('size', value);
                  } else {
                    handleBaseFontChange(group, 'size', value);
                  }
                }}
                style={{ width: '100%' }}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="粗细">
              <Select
                value={font.weight}
                style={{ width: '100%' }}
                options={[
                  { label: '常规', value: 'normal' },
                  { label: '加粗', value: 'bold' }
                ]}
                onChange={(value) => {
                  if (group === 'brewery') {
                    handleBreweryFontChange('weight', value);
                  } else if (group === 'price') {
                    handlePriceFontChange('weight', value);
                  } else {
                    handleBaseFontChange(group, 'weight', value);
                  }
                }}
              />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item label="颜色">
          <ColorPickerContainer>
            <ColorPicker
              value={font.color}
              onChange={(value) => {
                if (group === 'brewery') {
                  handleBreweryFontChange('color', value.toHexString());
                } else if (group === 'price') {
                  handlePriceFontChange('color', value.toHexString());
                } else {
                  handleBaseFontChange(group, 'color', value.toHexString());
                }
              }}
            />
          </ColorPickerContainer>
        </Form.Item>
        {group === 'brewery' && (
          <Form.Item label="显示酒厂名称">
            <Switch
              checked={(font as BreweryFontConfig).show}
              onChange={(value) => handleBreweryFontChange('show', value)}
            />
          </Form.Item>
        )}
        {group === 'price' && (
          <>
            <Form.Item label="显示价格分隔线">
              <Switch
                checked={(font as PriceFontConfig).dividerShow}
                onChange={(value) => handlePriceFontChange('dividerShow', value)}
              />
            </Form.Item>
            {(font as PriceFontConfig).dividerShow && (
              <>
                <Row gutter={16}>
                  <Col span={12}>
                    <Form.Item label="分隔线宽度">
                      <InputNumber
                        min={1}
                        max={5}
                        value={(font as PriceFontConfig).dividerWidth}
                        onChange={(value) => handlePriceFontChange('dividerWidth', value)}
                        style={{ width: '100%' }}
                      />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="分隔线样式">
                      <Select
                        value={(font as PriceFontConfig).dividerStyle}
                        style={{ width: '100%' }}
                        options={[
                          { label: '实线', value: 'solid' },
                          { label: '虚线', value: 'dashed' },
                          { label: '点线', value: 'dotted' }
                        ]}
                        onChange={(value) => handlePriceFontChange('dividerStyle', value)}
                      />
                    </Form.Item>
                  </Col>
                </Row>
                <Form.Item label="分隔线颜色">
                  <ColorPickerContainer>
                    <ColorPicker
                      value={(font as PriceFontConfig).dividerColor}
                      onChange={(value) => handlePriceFontChange('dividerColor', value.toHexString())}
                    />
                  </ColorPickerContainer>
                </Form.Item>
                <Form.Item label="双价格间距">
                  <InputNumber
                    min={0}
                    max={20}
                    value={(font as PriceFontConfig).secondPriceGap}
                    onChange={(value) => handlePriceFontChange('secondPriceGap', value)}
                    style={{ width: '100%' }}
                  />
                </Form.Item>
              </>
            )}
          </>
        )}
      </ConfigSection>
    );
  };

  return (
    <Form layout="vertical" className="config-panel">
      <Collapse defaultActiveKey={['layout', 'style', 'fonts']} bordered={false}>
        <Panel header="布局设置" key="layout">
          <StyledSpace direction="vertical">
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="行数">
                  <InputNumber
                    min={1}
                    max={10}
                    value={config.layout.rows}
                    onChange={(value) => handleLayoutChange('rows', value)}
                    style={{ width: '100%' }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="列数">
                  <InputNumber
                    min={1}
                    max={10}
                    value={config.layout.cols}
                    onChange={(value) => handleLayoutChange('cols', value)}
                    style={{ width: '100%' }}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="外容器内边距">
                  <InputNumber
                    min={0}
                    max={100}
                    value={config.layout.containerPadding}
                    onChange={(value) => handleLayoutChange('containerPadding', value)}
                    style={{ width: '100%' }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="内容区内边距">
                  <InputNumber
                    min={0}
                    max={50}
                    value={config.layout.padding}
                    onChange={(value) => handleLayoutChange('padding', value)}
                    style={{ width: '100%' }}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Form.Item label="项目间距">
              <InputNumber
                min={0}
                max={50}
                value={config.layout.gap}
                onChange={(value) => handleLayoutChange('gap', value)}
                style={{ width: '100%' }}
              />
            </Form.Item>
          </StyledSpace>
        </Panel>

        <Panel header="样式设置" key="style">
          <StyledSpace direction="vertical">
            <ConfigSection>
              <div className="section-title">背景设置</div>
              <Form.Item label="背景颜色">
                <ColorPickerContainer>
                  <ColorPicker
                    value={config.background.color}
                    onChange={(value) => onChange({ background: { ...config.background, color: value.toHexString() } })}
                  />
                </ColorPickerContainer>
              </Form.Item>
            </ConfigSection>

            <ConfigSection>
              <div className="section-title">酒款样式</div>
              <Form.Item label="背景颜色">
                <ColorPickerContainer>
                  <ColorPicker
                    value={config.item.backgroundColor}
                    onChange={(value) => handleItemStyleChange('backgroundColor', value.toHexString())}
                  />
                </ColorPickerContainer>
              </Form.Item>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="圆角">
                    <InputNumber
                      min={0}
                      max={20}
                      value={config.item.borderRadius}
                      onChange={(value) => handleItemStyleChange('borderRadius', value)}
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="内边距">
                    <InputNumber
                      min={8}
                      max={32}
                      value={config.item.padding}
                      onChange={(value) => handleItemStyleChange('padding', value)}
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </ConfigSection>

            <ConfigSection>
              <div className="section-title">酒标图片</div>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="宽度">
                    <InputNumber
                      min={40}
                      max={200}
                      value={config.item.image.width}
                      onChange={(value) => handleImageConfigChange('width', value)}
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="高度">
                    <InputNumber
                      min={40}
                      max={200}
                      value={config.item.image.height}
                      onChange={(value) => handleImageConfigChange('height', value)}
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="圆角">
                    <InputNumber
                      min={0}
                      max={100}
                      value={config.item.image.borderRadius}
                      onChange={(value) => handleImageConfigChange('borderRadius', value)}
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="底部间距">
                    <InputNumber
                      min={0}
                      max={40}
                      value={config.item.image.marginBottom}
                      onChange={(value) => handleImageConfigChange('marginBottom', value)}
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="填充方式">
                    <Select
                      value={config.item.image.fit}
                      style={{ width: '100%' }}
                      options={[
                        { label: '填充', value: 'cover' },
                        { label: '适应', value: 'contain' },
                        { label: '拉伸', value: 'fill' }
                      ]}
                      onChange={(value) => handleImageConfigChange('fit', value)}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="位置">
                    <Select
                      value={config.item.image.position}
                      style={{ width: '100%' }}
                      options={[
                        { label: '左侧', value: 'left' },
                        { label: '右侧', value: 'right' }
                      ]}
                      onChange={(value) => handleImageConfigChange('position', value)}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </ConfigSection>
          </StyledSpace>
        </Panel>

        <Panel header="字体设置" key="fonts">
          <StyledSpace direction="vertical">
            {Object.keys(config.fonts).map((group) => renderFontSection(group as keyof WineMenuConfig['fonts']))}
          </StyledSpace>
        </Panel>
      </Collapse>
    </Form>
  );
};

function getFontGroupLabel(group: string): string {
  const labels: Record<string, string> = {
    brewery: '酒厂名称',
    name: '酒款名称',
    price: '价格',
    category: '类型',
    abv: '酒精度'
  };
  return labels[group] || group;
}

export default ConfigPanel; 